<template>
  <div class="page-wrap">
    <div class="page-content" style="overflow:auto;">
      <div style="margin:14px 15px">
        <Breadcrumb>
          <BreadcrumbItem to="/questionnaireSurvey">问卷调查</BreadcrumbItem>
          <BreadcrumbItem>{{ name }}</BreadcrumbItem>
        </Breadcrumb>
      </div>
      <div class="img-header">
        <div class="class-title-wrap">
          <div class="class-title">
            <div class="class-title-all active">用户管理</div>
            <!--<div class="class-title-line" :class="{'line-active':allClassLine}"></div>-->
          </div>
        </div>
        <div>
          <Button type="primary" class="md-add-jh" @click="showDrawerMeber" :disabled="setBtnStatus()"
            >添加用户</Button
          >
        </div>
      </div>
      <!-- 用户列表 -->
      <div v-show="mebershow" style="height: calc(100% - 122px);">
        <div class="content-wrap" v-show="userList.length > 0">
          <div>
            <div class="project-item" v-for="(item, key) in userList" :key="key">
              <div class="item-first-line">
                <div class="project-name-state">
                  <div class="project-status-text">
                    <p
                      style="margin-right:8px;width: 200px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"
                      :title="item.userName"
                    >
                      <span>{{ key + 1 }}.用户名称：</span>
                      <span>{{ item.userName }}</span>
                    </p>
                    <!-- <p  style="margin-right:8px;width: 200px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;" :title="item.nickname">
                                            <span>昵称：</span>
                                            <span>{{item.nickname}}</span>
                                        </p> -->
                    <!-- <p  style="margin-right:8px;">
                                            <span>单位：</span>
                                            <span>{{item.user?item.user.companyName:''}}</span>
                                        </p> -->
                  </div>
                </div>
                <div class="btn-icon-wrap">
                  <Button
                    type="text"
                    size="small"
                    :disabled="!item.join"
                    @click="showQuestionnaireDetail(item)"
                    style="background: none;border: none;box-shadow: none;"
                  >
                    <img
                      :src="item.join ? checkIcon : checkIconDisabled"
                      class="click-icon"
                      title="查看问卷详情"
                    />
                  </Button>
                  <Poptip
                    transfer
                    confirm
                    title="确定要移除该用户吗？"
                    placement="left"
                    @on-ok="delUser(item)"
                    :style="setIsClick(item)"
                  >
                    <img :src="setDelImgSrc(item)" class="click-icon" alt="Del" title="移除" />
                  </Poptip>
                </div>
              </div>
              <div class="project-other-info">
                <!-- <p  style="margin-right:8px;width: 170px;">
                                    <span>类型：</span>
                                    <span>{{setType(item)}}</span>
                                </p>     -->
                <p style="margin-right:8px;width: 170px;">
                  <span>已参与:</span>
                  <Tag :color="isOnline(item.join).color">{{ isOnline(item.join).text }}</Tag>
                </p>
                <!-- <p  style="margin-right:8px;">
                                    <span>描述：</span>
                                    <span >{{(item.description)}}</span>
                                </p> -->
                <p style="margin-right:8px; display: flex;">
                  <span>其他意见：</span>
                  <Tooltip :max-width="200" :content="item.suggestion" placement="top">
                    <p style="max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{(item.suggestion)}}</p>
                  </Tooltip>
                </p>
              </div>
            </div>
          </div>
          <Page
            :current="Page"
            :total="total"
            v-show="userList.length"
            :page-size="PageSize"
            show-total
            show-elevator
            @on-change="userOnChange"
          />
        </div>
        <div v-show="userList.length === 0" class="defGraphWrap">
          <div class="defGraph"></div>
          <div class="graphText">暂无信息</div>
        </div>
      </div>
    </div>
    <!--单位内成员-->
    <Modal
      :closable="true"
      :mask-closable="false"
      width="1000"
      v-model="addDeviceModel"
      @on-visible-change="changeModalStatusMember"
      title="添加成员"
      :footer-hide="true"
    >
      <div
        style="display: flex;justify-content: flex-end;margin-top: 15px"
        v-if="sceneId == '' || sceneId == undefined"
      >
        <Input
          v-model.trim="addSearchComMemInput"
          placeholder="用户名称"
          style="width: 150px;margin-right: 15px"
          clearable
          @on-change="addSearchComMem"
        />
        <Button title="重置" @click="refreshAddGroupList"
          ><i class="el-icon-refresh-right"
        /></Button>
      </div>
      <div>
        <div class="tag-wrap-div">
          <Tag
            v-for="item in getAddMemIdArr"
            :key="item"
            :name="item"
            closable
            @on-close="handleCloseMember"
            >{{ handleTagName(item) }}</Tag
          >
        </div>
        <Table
          :columns="addGroupMemCol"
          :data="addGroupMemList"
          :max-height="setUserTableHei"
          @on-select="selectSignal"
          @on-select-cancel="cancelSelectSignal"
          @on-select-all="selectAll"
          @on-select-all-cancel="cancelSelectAll"
        ></Table>
        <div class="table-bottom">
          <div style="display: flex;justify-content: flex-start;align-items: center">
            <Button
              style="margin-right: 15px"
              type="primary"
              @click="memberAssignConfirm"
              :loading="submitAddMemLoading"
              >添加</Button
            >
            <Button @click="addDeviceModel = false">取消</Button>
          </div>
          <Page
            v-if="sceneId == '' || sceneId == undefined"
            :current="addRoleMemPage"
            :total="addRoleTotal"
            :page-size="addRolePageSize"
            show-total
            show-elevator
            @on-change="addGroupOnChange"
          />
        </div>
      </div>
    </Modal>
    <!--成员问卷答题详情-->
    <Modal
      :closable="true"
      :mask-closable="false"
      width="800"
      v-model="questionnaire.modal"
      class="questionnaire-modal"
      :title="questionnaire.title"
      :footer-hide="true"
    >
      <QuestionList :data="objList" pattern="answer" :isDetail="true"></QuestionList>
    </Modal>
  </div>
</template>

<script>
import { getaccessgrouplist } from '@/api/access_new';
import {
  queryUser,
  addUser,
  delUser,
  getUser,
  queryQuestionnaireDetail,
  getSurveyContentList
} from '@/api/questionnaire-survey';
import encryption from '@/libs/encryption.js';
import { getExperOfCompany } from '@/api/company.js';
import QuestionList from '@/components/question-list-qt/question-list.vue';

export default {
  data() {
    return {
      sceneId: '',
      userList1: [],
      objList: [],
      questionnaire: {
        title: '',
        modal: false,
        list: []
      },
      checkIcon: require('../../assets/project/magnifier-h.png'),
      checkIconDisabled: require('../../assets/project/magnifier-s.png'),
      // 页面设置
      fullHeight: document.documentElement.clientHeight,
      fullWidth: document.documentElement.clientWidth,
      setUserTableHei: '700',
      // tab显示
      mebershow: true,
      //有无数据显示
      showMeberList: false,
      isRootDesigner: false,
      id: '',
      name: '',
      USER_ID: '',
      //用户列表
      userList: [],
      getUserList: [],
      Page: 1,
      total: 0,
      PageSize: 10,
      // 添加用户
      addDeviceModel: false,
      submitAddMemLoading: false,
      addRoleMemPage: 1,
      addRoleTotal: 0,
      addRolePageSize: 10,
      addSearchComMemInput: '',
      getAddMemIdArr: [],
      saveMemberIdArr: [],
      addGroupMemList: [],
      questionnaireList: [],
      addGroupMemCol: [
        {
          type: 'selection',
          width: 60,
          align: 'left',
          render: (h, params) => {
            return h('div', {
              style: {
                display: 'none'
              }
            });
          }
        },
        {
          title: '用户名称',
          key: 'username',
          align: 'left'
        },
        {
          title: '昵称',
          key: 'nickname',
          align: 'left'
        },
        {
          title: '类型',
          key: 'type',
          align: 'left',
          render: (h, params) => {
            return h('span', this.setType(params.row));
          }
        },
        // {
        //     title:'角色',
        //     key:'role',
        //     align:'left'
        // },
        {
          title: '是否在线',
          key: 'online',
          align: 'left',
          width: 90,
          render: (h, params) => {
            let text = '';
            if (!params.row.online || params.row.online === 'false') {
              text = 'default';
            } else {
              text = 'success';
            }
            return h(
              'Tag',
              {
                props: {
                  color: text,
                  type: 'border'
                }
              },
              this.isOnline(params.row.online).text
            );
          }
        },
        {
          title: '创建者',
          key: 'creatorName',
          align: 'left'
        },
        {
          title: '创建时间',
          key: 'created',
          align: 'left',
          width: 170,
          sortable: true,
          sortType: 'desc'
        }
      ]
    };
  },
  components: {
    QuestionList
  },
  async mounted() {
    // 获取用户id
    await this.getSurveyContentList();
    let November = sessionStorage.getItem('November');
    November = JSON.parse(encryption.SelfUseDecrypt(November));
    this.USER_ID = November.userId;
    this.isRootDesigner = November.isRootDesigner;
    this.id = this.$route.query.id;
    this.name = this.$route.query.name;
    this.Creator = this.$route.query.creator;
    this.setStyle();
    window.onresize = () => {
      this.setStyle();
    };
    this.qureyUser();
    this.getUser();
    this.sceneId = this.$route.query.sceneId;
    console.log(this.sceneId, 'this.sceneIdthis.sceneId');
  },
  methods: {
    getSurveyContentList() {
      new Promise((resolve) => {
        getSurveyContentList({
          questionnaireId: this.$route.query.id,
          pageSize: 2147483646
        })
          .then(({ code, message, data = {} }) => {
            if (code !== 1) {
              this.$Message.warning(message);
              return;
            }
            this.questionnaireList = data.items;
          })
          .catch(() => {
            this.$Message.error('获取问卷试题列表异常');
          })
          .finally(() => {
            resolve();
          });
      });
    },
    // 展示用户问卷答题详情
    showQuestionnaireDetail(item) {
      this.questionnaire.modal = true;
      this.questionnaire.title = item.userName;
      this.currentData = item;
      this.getQuestionnaireDetail();
    },
    getQuestionnaireDetail() {
      this.questionnaire.list = [];
      queryQuestionnaireDetail({
        questionnaireId: this.currentData.questionnaireId,
        userId: this.currentData.userId,
        pageSize: 2147483646
      })
        .then(({ code, message, data = {} }) => {
          if (code !== 1) {
            this.$Message.warning(message);
            return;
          }
          this.questionnaire.list = data.items;
          let list = JSON.parse(JSON.stringify(this.questionnaireList));
          this.objList = list.map((item) => {
            item.options.forEach((items) => {
              items.no = items.label;
              items.answerId = items.id;
            });
            let answers = data.items.find((subItem) => subItem.contentId === item.id);
            if (answers) {
              item.userAnswer = answers.userAnswer;
            }
            item.answers = item.options;
            item.name = item.description;
            if (item.type === 0) {
              item.modeCode = 1;
            } else if (item.type === 2) {
              item.modeCode = 6;
              item.flagType = 3;
            } else {
              item.modeCode = 2;
            }
            return item;
          });
          console.log(this.objList);
        })
        .catch((error) => {
          console.error(error);
          this.$Message.error('查询提交详情异常');
        });
    },
    //分页查询已添加的用户
    qureyUser() {
      this.saveMemberIdArr = [];
      let params = {
        pageIndex: this.Page,
        pageSize: this.PageSize,
        questionnaireId: this.id
      };
      queryUser(params).then((res) => {
        if (res.code == 1) {
          this.userList = res.data.items;
          this.total = res.data.total;
          // for(let i=0;i<this.userList.length;i++){
          //     if(this.userList[i]['userName']){
          //         this.saveMemberIdArr.push(this.userList[i]['userId'])
          //     }
          // }
        } else {
          this.$Message.warning(res.message);
        }
      });
    },
    //查询已添加的用户
    getUser() {
      let params = {
        questionnaireId: this.id
      };
      getUser(params).then((res) => {
        this.getUserList = res.data;
        for (let i = 0; i < this.getUserList.length; i++) {
          if (this.getUserList[i]['userName']) {
            this.saveMemberIdArr.push(this.getUserList[i]['userId']);
          }
        }
      });
    },
    // 设置高度
    setStyle() {
      window.fullHeight = document.documentElement.clientHeight;
      window.fullWidth = document.documentElement.clientWidth;
      this.fullHeight = window.fullHeight;
      this.fullWidth = window.fullWidth;
    },
    //删除用户
    delUser(item) {
      delUser(item.id).then((res) => {
        if (res.code == 1) {
          this.$Message.success('删除成功');
          this.Page = this.Page > 1 && this.userList.length == 1 ? this.Page - 1 : this.Page;
          this.qureyUser();
          this.getUser();
        } else {
          this.$Message.warning('删除失败');
        }
      });
    },
    // 添加用户内成员列表
    async showDrawerMeber() {
      this.addDeviceModel = true;
      let params = {
        pageIndex: this.addRoleMemPage,
        pageSize: this.addRolePageSize,
        type: 'experimenter',
        order: 'desc',
        sortBy: 'created'
      };
      if (!this.isRootDesigner) {
        params.creator = this.USER_ID;
      }
      if (this.addSearchComMemInput != '') {
        params.username = this.addSearchComMemInput;
      }
      if (this.$route.query.sceneId) {
        let param = {
          pageIndex: 1,
          pageSize: 9999,
          testId: this.$route.query.sceneId
        };
        this.userList1 = [];
        getaccessgrouplist(param).then((res) => {
          if (res.code == 1) {
            let group = res.data.items;
            if (group.length > 0) {
              for (var i = 0; i < group.length; i++) {
                if (group[i].userList.length > 0) {
                  for (var j = 0; j < group[i].userList.length; j++) {
                    group[i].userList[j].groupname = group[i].name;
                  }
                }
                this.userList1 = this.userList1.concat(group[i].userList);
              }
              if ((this.userList1, length > 0)) {
                for (let i = 0; i < this.userList1.length; i++) {
                  this.userList1[i]._checked = false;
                  this.userList1[i]._disabled = false;
                  if (this.saveMemberIdArr.indexOf(this.userList1[i]['userId']) > -1) {
                    this.userList1[i]._disabled = true;
                  }

                  let IDJoinName = this.userList1[i].userId + '_._' + this.userList1[i].userName;
                  if (this.getAddMemIdArr.indexOf(IDJoinName) > -1) {
                    this.userList1[i]._checked = true;
                  }
                }
                this.addGroupMemList = this.userList1;
                console.log(this.addGroupMemList, 'this.addGroupMemListthis.addGroupMemList');
              }
            }
          }
        });
        this.addGroupMemCol = [
          {
            type: 'selection',
            width: 60,
            align: 'left',
            render: (h, params) => {
              return h('div', {
                style: {
                  display: 'none'
                }
              });
            }
          },
          {
            title: '用户名称',
            key: 'userName',
            align: 'left'
          },
          {
            title: '团队',
            key: 'groupname',
            align: 'left'
          }
        ];
      } else {
        this.addGroupMemList = [];
        getExperOfCompany(params)
          .then((res) => {
            if (res.data.code == 1) {
              let getData = res.data.data;
              this.addRoleTotal = getData.total;

              let items = getData.items;
              for (let i = 0; i < items.length; i++) {
                items[i]._checked = false;
                items[i]._disabled = false;
                if (this.saveMemberIdArr.indexOf(items[i]['id']) > -1) {
                  items[i]._disabled = true;
                }

                let IDJoinName = items[i].id + '_._' + items[i].userName;
                if (this.getAddMemIdArr.indexOf(IDJoinName) > -1) {
                  items[i]._checked = true;
                }
              }
              this.addGroupMemList = items;
            }
          })
          .catch((err) => {});
        this.addGroupMemCol = [
          {
            type: 'selection',
            width: 60,
            align: 'left',
            render: (h, params) => {
              return h('div', {
                style: {
                  display: 'none'
                }
              });
            }
          },
          {
            title: '用户名称',
            key: 'username',
            align: 'left'
          },
          {
            title: '昵称',
            key: 'nickname',
            align: 'left'
          },
          {
            title: '类型',
            key: 'type',
            align: 'left',
            render: (h, params) => {
              return h('span', this.setType(params.row));
            }
          },
          // {
          //     title:'角色',
          //     key:'role',
          //     align:'left'
          // },
          {
            title: '是否在线',
            key: 'online',
            align: 'left',
            width: 90,
            render: (h, params) => {
              let text = '';
              if (!params.row.online || params.row.online === 'false') {
                text = 'default';
              } else {
                text = 'success';
              }
              return h(
                'Tag',
                {
                  props: {
                    color: text,
                    type: 'border'
                  }
                },
                this.isOnline(params.row.online).text
              );
            }
          },
          {
            title: '创建者',
            key: 'creatorName',
            align: 'left'
          },
          {
            title: '创建时间',
            key: 'created',
            align: 'left',
            width: 170,
            sortable: true,
            sortType: 'desc'
          }
        ];
      }
    },
    //添加用户确认
    memberAssignConfirm() {
      if (this.getAddMemIdArr.length === 0) {
        this.$Message.error({
          content: '请选择需要添加的用户！',
          duration: 3
        });
        return false;
      }
      let arr = [];
      for (let i = 0; i < this.getAddMemIdArr.length; i++) {
        let obj = {
          userId: '',
          userName: ''
        };
        obj.userId = this.getAddMemIdArr[i].split('_._')[0];
        obj.userName = this.getAddMemIdArr[i].split('_._')[1];
        arr.push(obj);
      }
      this.submitAddMemLoading = true;
      let params = {
        questionnaireId: this.id,
        users: arr
      };
      addUser(params)
        .then((res) => {
          if (res.code === 1) {
            this.$Message.success({
              content: '添加成功！',
              duration: 3
            });
            this.qureyUser();
            this.getUser();
            this.addDeviceModel = false;
          }
          this.submitAddMemLoading = false;
        })
        .catch((err) => {
          this.submitAddMemLoading = false;
        });
    },
    //勾选框状态改变
    modifyCheckStatus(val, status) {
      for (let i = 0; i < this.addGroupMemList.length; i++) {
        if (val.id === this.addGroupMemList[i].id) {
          this.$set(this.addGroupMemList[i], '_checked', status);
        }
      }
    },
    // 点击添加一个
    selectSignal(val, row) {
      console.log(row);
      let id = row.id || row.userId;
      let name = row.username || row.userName;
      let IDJoinName = id + '_._' + name;
      console.log(IDJoinName, 'IDJoinNameIDJoinName');
      if (this.getAddMemIdArr.indexOf(IDJoinName) <= -1) {
        this.getAddMemIdArr.push(IDJoinName);
        this.modifyCheckStatus(row, true);
      }
    },
    // 点击删除一个
    cancelSelectSignal(val, row) {
      let id = row.id || row.userId;
      let name = row.username || row.userName;
      let IDJoinName = id + '_._' + name;
      if (this.getAddMemIdArr.indexOf(IDJoinName) > -1) {
        let index = this.getAddMemIdArr.indexOf(IDJoinName);
        this.getAddMemIdArr.splice(index, 1);
        this.modifyCheckStatus(row, false);
      }
    },
    // 点击添加一页
    selectAll(val) {
      for (let i = 0; i < this.addGroupMemList.length; i++) {
        let id = this.addGroupMemList[i].id || this.addGroupMemList[i].userId;
        let name = this.addGroupMemList[i].username || this.addGroupMemList[i].userName;
        let IDJoinName = id + '_._' + name;
        this.$set(this.addGroupMemList[i], '_checked', true);
        if (this.getAddMemIdArr.indexOf(IDJoinName) <= -1 && !this.addGroupMemList[i]._disabled) {
          this.getAddMemIdArr.push(IDJoinName);
        }
      }
    },
    // 点击取消一页
    cancelSelectAll(val) {
      for (let i = 0; i < this.addGroupMemList.length; i++) {
        let id = this.addGroupMemList[i].id || this.addGroupMemList[i].userId;
        let name = this.addGroupMemList[i].username || this.addGroupMemList[i].userName;
        let IDJoinName = id + '_._' + name;
        this.$set(this.addGroupMemList[i], '_checked', false);
        if (this.getAddMemIdArr.indexOf(IDJoinName) > -1 && !this.addGroupMemList[i]._disabled) {
          let index = this.getAddMemIdArr.indexOf(IDJoinName);
          this.getAddMemIdArr.splice(index, 1);
        }
      }
    },
    handleCloseMember(event, name) {
      if (this.getAddMemIdArr.indexOf(name) > -1) {
        let index = this.getAddMemIdArr.indexOf(name);
        this.getAddMemIdArr.splice(index, 1);
        let id = name.split('_._')[0];
        for (let i = 0; i < this.addGroupMemList.length; i++) {
          if (id === this.addGroupMemList[i].id) {
            this.$set(this.addGroupMemList[i], '_checked', false);
          }
        }
      }
    },
    //角色下成员列表分页跳转
    userOnChange(val) {
      this.Page = val;
      this.qureyUser();
    },
    //成员列表分页跳转
    addGroupOnChange(val) {
      this.addRoleMemPage = val;
      this.showDrawerMeber();
    },
    //搜索成员名字
    addSearchComMem(val) {
      this.addRoleMemPage = 1;
      this.addSearchComMemInput = this.addSearchComMemInput;
      this.showDrawerMeber();
    },
    changeModalStatusMember(val) {
      if (!val) {
        this.getAddMemIdArr = [];
      }
      this.addSearchComMemInput = '';
      this.addRoleMemPage = 1;
      this.addRolePageSize = 10;
    },
    //刷新成员列表
    refreshAddGroupList() {
      this.addRoleMemPage = 1;
      this.addSearchComMemInput = '';
      this.getAddMemIdArr = [];
      this.showDrawerMeber();
    },
    changeModalStatusSkill(val) {
      if (!val) {
        this.getAddSkillIdArr = [];
      }
      this.addSearchSkillInput = '';
      this.addSkillPage = 1;
      this.addSkillPageSize = 10;
    },
    // 显示tag的名称
    handleTagName(item) {
      return item.split('_._')[1];
    },
    //类型显示
    setType(val) {
      let text = '';
      if (val.type === 'designer') {
        if (val.role === 'evaluator') {
          text = '评估人员';
        }
        if (val.role === 'leader') {
          text = '单位管理员';
        }
        if (val.role === 'member') {
          text = '单位设计师';
        }
      } else if (val.type === 'experimenter') {
        text = '操作员';
      }
      return text;
    },
    // 是否在线
    isOnline(val) {
      let text = '';
      let color = '';
      let obj = {};
      if (val) {
        text = '是';
        color = 'success';
      } else {
        text = '否';
        color = 'warning';
      }
      obj.text = text;
      obj.color = color;
      return obj;
    },
    //是否可以删除
    setIsClick() {
      if (this.Creator !== this.USER_ID && !this.isRootDesigner) {
        return { 'pointer-events': 'none' };
      }
    },
    //是否可以添加
    setBtnStatus() {
      return this.Creator !== this.USER_ID && !this.isRootDesigner;
    },
    setDelImgSrc() {
      if (this.Creator !== this.USER_ID && !this.isRootDesigner) {
        return require('../../assets/project/delNote-d.png');
      } else {
        return require('../../assets/project/delNote-h.png');
      }
    }
  }
};
</script>

<style scoped>
.questionnaire-modal /deep/ .ivu-modal-body > div {
  height: calc(100vh - 200px);
  overflow: auto;
}

.page-wrap {
  padding: 30px;
  height: 100%;
}
.page-content {
  background-color: #fff;
  border-radius: 10px;
  height: 100%;
}
.img-header {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}
.table-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*margin-top: 15px;*/
  padding: 15px 10px 10px 19px;
  /* border-left: 1px solid #e8eaec;
  border-bottom: 1px solid #e8eaec;
  border-right: 1px solid #e8eaec; */
}
.tag-wrap-div {
  max-height: 100px;
  margin-bottom: 15px;
  margin-top: 10px;
  overflow-y: auto;
}
/* 新样式 */
.content-wrap {
  height: 100%;
  width: 100%;
  font-size: 14px;
  margin-top: 20px;
  padding: 0 20px;
}
.content-wrap > div {
  max-height: calc(100% - 50px);
  margin-bottom: 20px;
  overflow: auto;
}
.project-item {
  width: 100%;
  border-radius: 4px;
  border: 2px solid rgb(231, 231, 241);
  padding: 10px 15px;
  margin-bottom: 15px;
}
.item-first-line {
  display: flex;
  justify-content: space-between;
}
.project-name-state {
  display: flex;
  justify-content: flex-start;
}
.project-name {
  font-size: 16px;
  font-weight: 600;
  max-width: 400px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
.project-status-text {
  font-weight: 600;
  font-size: 14px;
  display: flex;
  justify-content: flex-start;
}
.btn-icon-wrap {
  display: flex;
  justify-content: flex-end;
}
.click-icon {
  cursor: pointer;
  height: 22px;
  margin-left: 10px;
}
.project-other-info {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 8px;
  color: rgba(51, 51, 51, 0.4);
  font-weight: bold;
}
.sendMsgContent {
  display: flex;
  justify-content: flex-start;
  margin-left: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  width: calc(100vh - 300px);
}
/* 省略图 */
.defGraphWrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.defGraph {
  height: 126px;
  width: 157px;
  background: url('../../assets/globalIcon/defGraph.png') no-repeat center center;
  background-size: 157px 126px;
}
.graphText {
  color: #888;
  font-size: 14px;
  text-align: center;
  margin-top: 20px;
}
.class-title-all {
  font-size: 16px;
  cursor: pointer;
  color: var(--default-color-level2);
}

.active {
  color: var(--default-color);
  font-size: 22px;
  font-weight: 600;
}
.class-title-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>
